<template>
  <div class="product-review w-[calc(100%-2rem)] mx-auto">
    <!-- 产品信息卡片 -->
    <div class="bg-white rounded-lg p-3 mb-2">
      <div class="flex items-start space-x-4">
        <!-- 产品图片 -->
        <img :src="imageBaseUrl + detailInfo.picUrl" class="w-20 h-20 rounded-lg flex-shrink-0" />
        <!-- 产品信息 -->
        <div class="flex-1">
          <h3 class="text-base font-medium mb-2">{{ detailInfo.type }} - {{isZh ? detailInfo.place : detailInfo.placeEn}}</h3>

          <!-- 评分 -->
          <div class="flex items-center mb-2">
            <van-rate v-model="detailInfo.score" readonly size="14" color="#ffd21e" void-color="#eee" />
            <span class="ml-2 text-sm font-medium">{{ detailInfo.score }}</span>
          </div>

          <!-- 评价统计 -->
          <div class="flex items-center justify-between text-sm text-gray-500">
            <span>{{ detailInfo.favoriteCount }} {{ $t('products.reviewCount') }}</span>
            <span class="text-[#ff7a00]">{{ $t('products.showMore') }} ></span>
          </div>
        </div>
      </div>

      <!-- 产品特点标签 -->
      <div class="mt-4">
        <div class="flex flex-wrap">
          <div v-for="feature in productFeatures" :key="feature" class="flex items-center mr-6 mb-2">
            <div class="w-5 h-5 bg-orange-500 rounded-full flex items-center justify-center mr-2">
              <van-icon name="success" size="12" color="white" />
            </div>
            <span class="text-xs text-gray-600">{{ feature }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户评价 -->
    <div class="bg-white rounded-lg p-4">
      <div v-for="review in reviews" :key="review.id" class="mb-4 last:mb-0">
        <!-- 用户信息 -->
        <div class="flex items-center mb-2">
          <img :src="review.avatar" class="w-6 h-6 rounded-full mr-2" alt="" />
          <span class="text-sm font-medium">{{ review.username }}</span>
          <van-rate v-model="review.rating" readonly size="12" color="#ffd21e" void-color="#eee" class="ml-2" />
        </div>

        <!-- 评价内容 -->
        <div class="text-sm text-gray-700 mb-2 leading-relaxed">
          <span v-if="review.isExpanded">{{ review.fullContent }}</span>
          <span v-else>{{ review.fullContent.substring(0, 20) }}<span v-if="review.fullContent.length > 20">...</span></span>
        </div>

        <!-- 展开/收起按钮 -->
        <div v-if="review.fullContent && review.fullContent.length > 20" class="mb-2 flex items-center justify-between">
          <!-- <van-button type="primary" size="mini" plain @click="toggleReview(review)" class="text-xs">
            {{ review.isExpanded ? "收起" : "Show more" }}
          </van-button> -->
          <div class="text-xs text-[#ff7a00]" @click="toggleReview(review)">{{ $t('products.showMore') }}</div>
          <div class="text-xs text-gray-400">{{ review.date }}</div>
        </div>


        <!-- 分割线 -->
        <van-divider v-if="review.id !== reviews[reviews.length - 1].id" />
      </div>
    </div>
  </div>
</template>

<script>
import { Divider, Rate } from "vant"
import { mapGetters } from "vuex"
export default {
  name: "ProductReview",
  components: {
    [Divider.name]: Divider,
    [Rate.name]: Rate,
  },
  props: {
    detailInfo: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    ...mapGetters({
      isZh: "lang/isZh",
    }),
    imageBaseUrl() {
      return process.env.VUE_APP_IMAGE_URL
    },
  },
  data() {
    return {
      productInfo: {
        title: "eSIM- 中国大陆 + 香港",
        rating: 4.95,
        reviewCount: 192,
      },
      productFeatures: ["网速快", "网络覆盖广", "物超所值", "使用便捷", "容易激活"],
      reviews: [
        {
          id: 1,
          username: "SANDRA.P",
          avatar: "https://flagcdn.com/w20/us.png",
          rating: 5,
          fullContent:
            "Balbalbalbalbl 测试机构水电费机构的粉丝机构矮冬瓜-------我是测试",
          date: "16-Apr-2025",
          isExpanded: false,
        },
        {
          id: 2,
          username: "SANDRA.P",
          avatar: "https://flagcdn.com/w20/us.png",
          rating: 5,
          fullContent:
            "Balbalbalbalbl 测试机构水电费机构的粉丝机构矮冬瓜-------我是测试",
          date: "16-Apr-2025",
          isExpanded: false,
        },
      ],
    }
  },
  methods: {
    toggleReview(review) {
      review.isExpanded = !review.isExpanded
    },
  },
}
</script>

<style scoped>
::v-deep .van-rate__item {
  margin-right: 2px;
}

::v-deep .van-button--mini {
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
}
</style>
